import Taro from '@tarojs/taro'
import React, { useEffect, useRef, useState } from 'react'
import { Image, ScrollView, Text, View } from '@tarojs/components'
import ModuleTitle from '@COMPONENTS/ModuleTitle'
import DoctorCardPlaceholder from '@COMPONENTS/Placeholder/DoctorCardPlaceholder'
import RecommendUserCard from '@COMPONENTS/User/RecommendUserCard'
import i18n from '@I18N'
import Images from '@ASSET/Images'
import Navigate from '@NAVIGATION/navigateManager'
import { LanguageType } from '@INTERFACES/Common'
import { DoctorITF } from '@INTERFACES/Doctor'
import { Analytic_Type } from '@CONSTANTS/analytic'
import style from './HomeDoctorCard.module.scss'

interface Props {
  loading: boolean,
  language: LanguageType,
  doctors: DoctorITF[],
  refreshDoctor: () => void
}

const HomeDoctorCard: React.FC<Props> = ({ loading, language, doctors, refreshDoctor }) => {
  const [scrollLeft, setScrollLeft] = useState<number | undefined>(0)
  const lastDoctors = useRef(doctors)
  const onClickMoreDoctor = () => {
    Navigate.doctorList()
  }
  const onClickDoctor = (pId: string) => {
    Navigate.doctorDetail({ pId })
    Taro.tracker.trackEvent(Analytic_Type.tap_recom_doctor.eventId, { tapid: pId })
  }
  const onClickRefreshDoctor = () => {
    refreshDoctor?.()
    setTimeout(() => {
      setScrollLeft(0)
    })
  }
  useEffect(() => {
    if (doctors !== lastDoctors?.current) {
      setScrollLeft(undefined)
    }
  }, [doctors])
  return (
    <View className={style.contentContainer}>
      <ModuleTitle
        title={i18n.doctor.expert_recommend()}
        subTitle={i18n.doctor.expert_recommend_sub_tit()}
        showMore
        moreTextClass={style.moreTextClass}
        containerClass={style.containerClass}
        subTitleClass={style.subTitleClass}
        onClickMore={onClickMoreDoctor}
        iconSource={Images.arrow.home_title}
      />
      <View className={style.scrollView}>
        <View className={style.leftLinear} />
        <View className={`${style.rightLinear} ${style.rightLinear}`} />
        <ScrollView scrollX scrollLeft={scrollLeft} scrollWithAnimation className={style.scrollViewContent}>
          {loading ? <DoctorCardPlaceholder width={263} height={130} />
            : (
              <View className={style.recommendUser}>
                <View className={style.recommendUserList}>
                  {doctors.map((item, index) => {
                    const { p8Id } = item
                    return (
                      <View className={style.recommendDoctor} key={p8Id}>
                        <RecommendUserCard
                          data={item}
                          language={language}
                          onClick={onClickDoctor}
                          showLabel={false}
                          onLineDesc
                          onlyGroup
                        />
                      </View>
                    )
                  })}
                </View>
                <View className={style.refreshDoctor} key="refresh" onClick={onClickRefreshDoctor}>
                  <View className={style.refreshContent}>
                    <Text className={style.refreshText}>换一批</Text>
                    <Image src={Images.doctor.refresh_random} className={style.refreshBtn} />
                  </View>
                </View>
              </View>
            )}
        </ScrollView>
      </View>
    </View>
  )
}
export default HomeDoctorCard
